<script lang="ts" setup>
import { cloneDeep } from "lodash-es";
import { getRandomItems } from "@/utils";
import NewGames from "@/components/NewGames/index.vue";
import { useRandomGamesStore } from "@/store/useRandomGamesStore";
import { useRecentPlayStore } from "@/store/useRecentPlayStore";
const {
  games,
  puzzleGames,
  actionGames,
  sportsGames,
  shootingGames,
  casualGames,
  beautyGames,
} = useGamesData();

const randomGamesStore = useRandomGamesStore();

const recentPlayGamesStore = useRecentPlayStore();

const randomGames = computed(() => {
  return getRandomItems(cloneDeep(unref(games)), 40);
});

const router = useRouter();
// const { play } = usePlay();
const onPlay = () => {
  const randomGame = getRandomItems(cloneDeep(unref(games)), 1)[0];
  router.push(`/detail?id=${unref(randomGame).id}`);
  // play(randomGame);
};

const ad1 = useGoogleAd("ad1");
const ad2 = useGoogleAd("ad2");

</script>
<template>
  <div>
    <Search />
    <Advert v-bind="ad1" class="mb-12" />
    <Slider
      v-if="recentPlayGamesStore.recentPlayGames.length"
      title="Recent Play"
      size="small"
      :data="recentPlayGamesStore.recentPlayGames"
    />
    <NewGames :data="randomGamesStore.randomNewGames" />
    <GameList title="Hot Games" :data="randomGamesStore.randomHotGames" />
    <Featured
      title="Classic Games"
      show-more
      :data="randomGamesStore.randomClassicGames"
      @click-title="router.push('/SchRes?type=Classic')"
    />
    <Advert v-bind="ad2" class="mb-12" />
    <Slider title="Puzzle Games" :data="puzzleGames" />
    <Slider title="Action Games" :data="actionGames" />
    <Slider title="Sports Games" :data="sportsGames" />
    <Slider title="Shooting Games" :data="shootingGames" />
    <Slider title="Casual Games" :data="casualGames" />
    <Slider title="Beauty Games" :data="beautyGames" />
    <GameList title="Trending Games" :data="randomGames" />
    <FloatPlay @play="onPlay" />
  </div>
</template>
